<template>
  <div>
        <div class="rightTop">
            车辆信息|车辆实时在线情况
        </div>
        <div class="rightMiddle">
              
              <div class="mobile">
                 <div class="mobileText"> 设备号：</div>
                  <div class="mobileInput"><el-input v-model="clientId" placeholder="设备号" clearable /></div>
                  <div class="mobileText"> 设备状态：</div>
                  <div class="mobileInput">
                          <el-select v-model="onlineStatus" filterable placeholder="设备状态" @change="changeClientId" >
                              <el-option
                                  v-for="item in list"
                                  :key="item"
                                  :label="item.label"
                                  :value="item.value"
                                  />
                          </el-select>
             
                  </div>
              </div>
              <div class="select">
                  <el-button type="primary" @click="getClientId">查询</el-button>
              </div>
              
        </div>
         <div class="rightBottom"> 
          <div style="background: linear-gradient(90deg,#00BAFF 0%,#8feece 100%);height:3vh;color: #fff;line-height: 3vh;margin-top: 10px;">
              总计{{total}}条
          </div>
          <el-table :data="tableData"  border highlight-current-row >
                    <el-table-column prop="No" label="序号" width="80" align="center"/>
                    <el-table-column prop="mobileNo" label="设备号" width="200" align="center"/>
                    <el-table-column prop="deviceModel" label="设备型号" width="200" align="center"/>
                    <el-table-column prop="deviceTime" label="设备在线/离线时间" width="260" align="center"/>
                    <el-table-column prop="registerTime" label="注册时间" width="260" align="center"/>
                    <el-table-column prop="plateNo" label="车牌号" width="200" align="center"/>
                    <el-table-column prop="onlineStatus" label="设备状态" width="200" align="center">
                  
                    </el-table-column>
                    <el-table-column prop="bind" label="是否已注册" width="220" align="center"/>
                    
          </el-table>
          <div class="pagination">
                      <el-pagination
                        v-model:current-page="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[8, 10, 15,17]"
                        :background="background"
                        layout=" sizes, prev, pager, next"
                        :total="total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        next-text="下一页" prev-text="上一页"
                      />
          </div>
       </div>
    </div>
</template>

<script>
import api from "@/api/api";
import  ElNotification  from 'element-plus';
export default {
  components: {ElNotification},
  name: 'vehicleInfo',
  props: {
    
  },
  data: function () {
      return {
        list:[
          {label:'在线',value:1},
          {label:'离线',value:0}
        ],
        PDate:[],
        //下拉框选中的设备号
        clientId:"",
        currentPage:1,
        pageSize:15,
        background:true,
        total:0,
        onlineStatus:"",
        //表格数据
        tableData:[]
     }
    },
      mounted() {
          this.getNowDate();
          this.selectRgister();
      },
      methods: {
      //获取当前日期yy-mm-dd
      getNowDate() {
            const timeOne = new Date()
            const year = timeOne.getFullYear()
            let month = timeOne.getMonth() + 1
            let day = timeOne.getDate()
            month = month < 10 ? '0' + month : month
            day = day < 10 ? '0' + day : day
            this.PDate = [`${year}-${month}-${day}`,`${year}-${month}-${day}`];
      },
      //点击查询
      getClientId(){
       
        this.selectRgister();
      
      },

      selectRgister(){
        api.selectRgister(this.clientId,this.onlineStatus,this.currentPage,this.pageSize)
        .then(res=>{
          if(res.code==0){
            this.total=res.data.total
            this.getTable(res.data.records)
          }
        })
      },
      getTable(val){ 
        this.tableData = val.map((item,index) => {
        if(item.bind){
          item.bind="已注册"
        }else{
          item.bind="未注册"
        }
        if(item.onlineStatus==1){
          item.onlineStatus="在线"
        }else{
          item.onlineStatus="离线"
        }
              return {
                No: this.pageSize*(this.currentPage-1)+index + 1,
                   ...item,
                  type: status
                };
      });
     
    },
    handleSizeChange(val){
         this.pageSize=val;
         this.selectRgister();
      },
      handleCurrentChange(val){
        this.currentPage=val;
        this.selectRgister();
      },
      changeClientId(val){
        this.onlineStatus=val;
      },
      
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


.rightTop{
  border-bottom: 1px solid #fff ;
  height: 4vh;
  width: 100%;
  line-height: 4vh;
  box-shadow: 0 0 4px #ddd;
  padding-left: 1vw;


}
.rightMiddle{
  margin-top: 1vh;
  border-bottom: 1px solid #fff ;
  height: 5vh;
  width: 100%;
  line-height: 5vh;
  box-shadow: 0 0 4px #ddd;
  padding-left: 1vw;

 
}
.rightBottom{
  margin-top: 1vh;
  height: 77vh;
  width: 95%;
  padding-left: 3vw;
}
.pagination{
  float: left;
  margin-left: 30%;
  margin-top: 1vh;
}
.date{
  float: left;
}
.dateText{
  float: left;
}
.datePicker{
  float: left;
  margin-top: 3px;
}
.mobile{
  float: left;

}
.mobileText{
  float: left;
  margin-left: 1vw;
}
.mobileInput{
  float: left;
  width: 7vw;
}
.select{
  float: left;
  margin-left: 2vw;
}
/*设置xx条/页的框的颜色*/

:deep(.el-pagination.is-background .btn-prev) {
  background: #ffffff !important; 
  border: 1px solid #f4f4f5;
  width: 70px;
  box-shadow: 0 0 1px #ddd;
}

:deep(.el-pagination.is-background .btn-next){
   background: #ffffff !important; 
   border: 1px solid #f4f4f5;
   width: 70px;
   box-shadow: 0 0 1px #ddd;
}


:deep(.el-pagination.is-background .btn-prev, ::v-deep .el-pagination.is-background .btn-next,::v-deep .el-pagination.is-background .el-pager li){
   
     margin:0;
}
</style>
